<template>
    <component :is="name" v-model:controller="controller"></component>
</template>

<script lang='ts' setup>
import OriginMain from '@/components/origin/OriginMain.vue'
import TagsManage from '@/components/origin/TagsManage.vue'
import AddOrigin from '@/components/origin/AddOrigin.vue'
import { ref, shallowRef, watch, type Ref, type ShallowRef } from 'vue'

// 控制组件切换的响应式变量
const controller: Ref<number> = ref(1)

// 动态组件名  默认是溯源主页
let name: ShallowRef = shallowRef(OriginMain)
// 设置组件切换侦听器
watch(controller, (newValue) => {
    switch (newValue) {
        // 溯源首页
        case 1:
            name.value = OriginMain
            break;
        // 溯源添加页
        case 2:
            name.value = AddOrigin
            break;
        // 溯源标签管理页
        case 3:
            name.value = TagsManage
            break;
    }
})
</script>

<style lang='scss' scoped></style>